@extends('layouts.system')

@section('css')
    <link href="{{ URL::asset('/system/assets/css/style.css')}}" rel="stylesheet"/>
    <style type="text/css">
        .btnDiv {
            margin-right: 25px;
            float: left;
        }

        .btnDiv button {
            width: 90px;
            border-radius: 5px;
            margin: 5px;
        }

        .tableDiv {
            padding: 20px 20px 50px 20px;
            background-color: #d7d7d7;
            width: 700px;
            text-align: center;
        }

        .tableDiv table {
            width: 400px;
        }

        .tableDiv table tr {
            background-color: #fff;
            text-align: center;
        }

        .tableDiv table th {
            text-align: center;
        }

        .infoItem {
            margin: 10px 0;
            line-height: 34px;
        }

        .infoItem .desc {
            width: 80px;
            font-size: 16px;
            color: #000;
            padding: 0;
        }

        .nextDiv {
            margin: 35px;

        }

        .nextDiv button {
            width: 90px;
            border-radius: 5px;
            margin: 5px;
        }

        .msgDiv {
            float: left;
            background-color: #d7d7d7;
        }

        .userDiv {
            float: left;
            display: none;
        }

        .selDiv {
            width: 100px;
            padding: 0;
        }

        .selDiv button {
            width: 90px;
            border-radius: 5px;
        }

        @media (max-width: 768px) {
            .tableDiv {
                width: 100%;
            }

            .tableDiv table {
                width: 100%;
            }
        }

    </style>
@endsection

@section('content')
    <div id="cl-wrapper" class="fixed-menu">

        <div class="container-fluid" id="pcont">
            <div class="col-md-12" style="padding-right: 0;">
                <div class="block-flat">
                    <div class="header">
                        <div class="pull-left">
                            <p class="jb_underline">提现审核&#62;&#62;权限功能</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content">
                        <div class="btnDiv">
                            <div>
                                <button type="button" class="btn btn-default" onclick="myPower()">我的权限</button>
                            </div>
                            @if(in_array($auth['auth'],['group_a','group_b','group_c']))
                            <div>
                                <button type="button" class="btn btn-default" onclick="sendMsg()">群发消息</button>
                            </div>
                                <div>
                                    <button type="button" class="btn btn-default" onclick="msgTrigger()">消息触发</button>
                                </div>
                            @endif
                        </div>

                        <div class="msgDiv">
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">消息标题</div>
                                <div class="col-sm-9 value">
                                    <input v-model="title" type="text" class="form-control" placeholder="消息标题">
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">消息内容</div>
                                <div class="col-sm-9 value">
                                    <textarea v-model="messages" class="form-control" placeholder="消息内容" style="min-height: 120px;"></textarea>
                                </div>
                            </div>

                            <div class="pull-right nextDiv">
                                <button type="button" class="btn btn-default" onclick="gotoUser()">下一步</button>
                            </div>
                        </div>


                        <div class="userDiv">
                            <div class="row">
                                <div class="col-sm-12">

                                    <div class="pull-left"
                                         style="background-color: #ddd; margin: 10px 0; padding:10px 50px;">
                                        <div id="datatable-icons_length" class="dataTables_length col-sm-2"
                                             style="width: 150px;">
                                            <select size="1" v-model="type" class="form-control" @change="changeType">
                                            <option value="id">用户ID</option>
                                            <option value="name">用户名</option>
                                            <option value="state">状态</option>
                                            </select>
                                        </div>
                                        <div v-if="type !='state'" class="col-sm-2" style="width: 250px;">
                                            <input v-model="keyword" id="searchUserName" type="text"
                                                   class="form-control"
                                                   placeholder="关键词">
                                        </div>
                                        <div v-if="type=='state'" id="datatable-icons_length"
                                             class="dataTables_length col-sm-2"
                                             style="width: 250px;">
                                            <select size="1" v-model="keyword" class="form-control">
                                                <option value="1">正常</option>
                                                <option value="2">封禁</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2" style="width: 100px;">
                                            <button v-on:click="search" type="button" class="btn btn-jianbei">搜索
                                            </button>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="pull-left" style="margin: 10px 0; padding:10px 0;">

                                        <div class="col-sm-2 selDiv">
                                            <button v-on:click="selectall(1)" type="button" class="btn btn-default">全选本页</button>
                                        </div>
                                        <div class="col-sm-2 selDiv">
                                            <button v-on:click="selectall(3)" type="button" class="btn btn-default">无</button>
                                        </div>
                                        <div class="col-sm-2 selDiv">
                                            <button v-on:click="selectall(2)" type="button" class="btn btn-default">全选全部</button>
                                        </div>
                                    </div>

                                    <div class="pull-right" style="margin: 10px 0; padding:10px 0;">
                                        <div class="col-sm-2 selDiv">
                                            <button v-on:click="send()" type="button" class="btn btn-default">群发消息</button>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>

                            <table class="table table-bordered" id="datatable-icons">
                                <thead style="background-color: #ffd866;">
                                <tr>
                                    <th>选择</th>
                                    <th>用户ID</th>
                                    <th>用户账号</th>
                                    <th>用户名</th>
                                    <th>等级</th>
                                    <th>状态</th>
                                    <th>身份</th>
                                </tr>
                                </thead>
                                <tbody>

                                <tr class="odd gradeX" v-for="(item,index) in lists">
                                    <td>
                                        <label class="radio-inline">
                                            <input type="checkbox" v-bind:id="item.id" v-bind:value="item.id" v-model="checkboxlist" class="icheck">
                                        </label>
                                    </td>
                                    <td><span v-text="item.id"></span></td>
                                    <td><span v-text="item.account"></span></td>
                                    <td><span v-text="item.name"></span></td>
                                    <td><span v-text="item.level"></span></td>
                                    <td>
                                        <span style="color:#06b55a;" v-if="item.state != 2">正常</span>
                                        <span style="color:red;" v-if="item.state == 2">封禁</span>
                                    </td>
                                    <td><span v-text="identity[item.identity]"></span></td>
                                </tr>
                                </tbody>
                            </table>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="pull-right">
                                        <div class="page">
                                            <page :current="current" :total="total" show-total
                                                  show-elevator @on-change="changePage"></page>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
      function sendMsg() {
        window.location.href = '/admin/manager/sendMsg';
      }
      function msgTrigger() {
        window.location.href = '/admin/manager/msgTrigger';
      }
      function myPower() {
        window.location.href = '/admin/manager/myPower';
      }
      function gotoUser() {
        document.querySelector(".msgDiv").style.display = "none";
        document.querySelector(".userDiv").style.display = "block";
      }

      Vue.use(VueResource)
      var vm = new Vue({
        el: '#pcont',
        data: {
          current: 1,
          total: 0,
          type: '',
          keyword: '',
          checkboxlist: [],
          checkboxall: false,
          checkboxpage: false,
          identity: {},
          lists: {},
          title: '',
          messages: ''
        },
        created: function () {
          getLists(this);
        },
        methods: {
          changePage: function (current) {
            this._data.current = current
            getLists(this);
          },
          search: function () {
            this._data.current = 1;
            getLists(this);
          },
          changeType: function () {
            this._data.keyword = ''
          },
          selectall: function (type) {
            var _this = this
            console.log(_this.checkboxlist)
            if(type == 1 || type == 2) {
              _this.checkboxlist = []
              $.each(_this.lists,function (index,item) {
                _this.checkboxlist.push(item.id)
              })
              if(type == 1) {
                _this.checkboxall =  false;
                _this.checkboxpage =  true;
              }
              if(type == 2) {
                _this.checkboxpage =  false;
                _this.checkboxall =  true;
              }
            }
            if(type == 3) {
              _this.checkboxpage =  false;
              _this.checkboxall =  false;
              _this.checkboxlist = []
            }
            console.log(_this.checkboxlist)
          },
          send : function () {
            console.log(234)
            sendMessages(this)
          }
        }
      })

      function getLists(_vm) {
        var params = {
          current: _vm._data.current
        }
        var conditions = {
          type: _vm._data.type,
          keyword: _vm._data.keyword
        }
        params = $.extend(params, conditions)
        _vm.$http.get('/admin/manager/getUsersLists', {params: params})
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              _vm._data.lists = json.data.lists;
              _vm._data.total = json.data.total;
              _vm._data.identity = json.data.identity;
              if(_vm.checkboxall) {
                _vm.selectall(2)
              }
            }
            console.log('data:')
            console.log(_vm._data)
          })
          .catch(function (response) {
            console.log(response)
          })
      }

      function sendMessages(_vm) {
        var data = {
          title: _vm.title,
          messages: _vm.messages,
          checkboxall: _vm.checkboxall,
          userlists: _vm.checkboxlist,
          type: _vm._data.type,
          keyword: _vm._data.keyword
        }
        _vm.$http.post('/admin/manager/sendMessages', data, {headers: header()})
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              alert('操作成功')
            }else{
              alert(json.msg)
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

    </script>
@endsection